<script setup lang="ts">
import dayjs from 'dayjs'
import { Icon } from '@iconify/vue'
import type {MomentVO} from "@/types/vo/MomentVO";
import {getCommentTreeService} from "@/apis/front/circle";
import type {CommentVO} from "@/types/vo/CommentVO";

const { moment } = defineProps<{
  moment: MomentVO
}>()
const showComment = ref(false)
const comments = ref<CommentVO[]>([])
const getCommentList = async () => {
  const res = await getCommentTreeService({
    momentId: moment.id
  })
  comments.value = res.data.data
}

const handleClick = async () => {
  if(!showComment.value){
    await getCommentList()
  }
  showComment.value = !showComment.value
}

</script>
<template>
  <div class="flex flex-col w-fuLl items-start rounded gap-1px">
    <div class="pl-15px py-20px w-full bg-white">
      <div class="flex items-center">
        <n-avatar
          :src="moment.userAvatar"
          class="w-42px h-42px rounded-full mr-10px"
        />
        <div class="flex flex-col">
          <div class="text-16px font-bold">{{ moment.userName }}</div>
          <div class="text-12px text-gray-400">
            {{ dayjs(moment.createdTime).format('YYYY-MM-DD HH:mm') }}
          </div>
        </div>
      </div>
      <div class="mt-10px">
        <div class="text-14px">{{ moment.content }}</div>
        <div class="mt-10px flex gap-10px">
          <n-image
            v-for="(url, index) in moment.picUrls"
            :key="index"
            :src="url"
            class="w-100px h-100px rounded"
            width="100"
            height="100"
            object-fit="cover"
          />
        </div>
      </div>
    </div>
    <div
      class="bg-white w-full pl-15px py-5px gap-20px flex justify-evenly font-size-12px"
    >
      <div class="c-#999 flex gap-2px items-center cursor-pointer">
        <Icon icon="circum:share-1" width="16" height="16" />
        <span>分享</span>
      </div>
      <div
        class="comment-icon c-#999 flex gap-2px items-center cursor-pointer"
        :class="{ active: showComment }"
        @click="handleClick"
      >
        <Icon icon="ant-design:comment-outlined" width="16" height="16" />
        <span>评论</span>
        <span class="ml-5px">({{ moment.replyCount || 0 }})</span>
      </div>
    </div>
    <div
      class="flex flex-col w-full items-start bg-white pt-20px"
      v-if="showComment"
    >
      <div class="ml-15px font-size-16px font-500">
        <span>评论 </span> {{ moment.replyCount || 0 }}
      </div>
      <div class="w-full pr-15px">
        <CommentBox :target="moment" class="w-full" @submit="() => getCommentList()" />
      </div>
      <CommentList class="w-full" :comments="comments" @update:replies="() => getCommentList()" />
    </div>
  </div>
</template>
<style scoped lang="scss">
.comment-icon {
  &.active {
    color: #409eff;
  }
}
</style>
